<template>
  <div>
    <div class="warnningTip"><i class="el-icon-warning-outline" />使用分享返佣功能，请先进行<strong>任务配置</strong></div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="handleQuery"
      @clear="clear"
    />
    <div class="doumee_table_header">
      <el-button
        v-if="meta.indexOf('sPShareOrder') > -1"
        v-preventReClick
        type="primary"
        @click="selectBack()"
      >批量返佣处理</el-button>
      <el-button v-if="meta.indexOf('shareOrderListExport') > -1" :loading="exportLoading" @click="selectExport">导出</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column :selectable="(row)=>row.status === '0'" fixed="left" align="center" type="selection" width="55" />
      <el-table-column
        align="center"
        label="订单号"
        width="210"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span class="primaryColor pointer" @click="orderDetail(scope.row)">{{ scope.row.orderId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单类型" prop="shareTypeName" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" label="所属任务" prop="shareName" min-width="140" show-overflow-tooltip />
      <el-table-column align="center" label="订单可返佣金额" prop="invoiceMoney" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" label="佣金比例(%)" prop="ratio" min-width="100" show-overflow-tooltip />
      <el-table-column align="center" label="预计返佣(元)" prop="taskMoney" min-width="100" show-overflow-tooltip />
      <el-table-column align="center" label="实际返佣(元)" prop="realMoney" min-width="100" show-overflow-tooltip />
      <el-table-column align="center" label="返佣用户信息" prop="shareMemberInfo" min-width="210" show-overflow-tooltip />
      <el-table-column align="center" label="下单会员信息" prop="memberInfo" min-width="210" show-overflow-tooltip />
      <el-table-column align="center" label="下单时间" prop="orderTime" min-width="210" show-overflow-tooltip />
      <el-table-column align="center" label="订单状态" min-width="80">
        <template v-slot="scope">
          <span v-if="scope.row.payStatus === '3'">支付成功</span>
          <span v-if="scope.row.payStatus === '4'">退款中</span>
          <span v-if="scope.row.payStatus === '5'">退款完成</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" prop="remarks" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" fixed="right" label="返佣状态" min-width="80">
        <template v-slot="scope">
          <span v-if="scope.row.status === '0'">待确认</span>
          <span v-if="scope.row.status === '1'">失效</span>
          <span v-if="scope.row.status === '2'">已发放</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" min-width="120">
        <template v-slot="scope">
          <div class="flex-cc">
            <el-button
              v-if="scope.row.status === '0' && meta.indexOf('sPShareOrder') > -1"
              v-preventReClick
              type="text"
              @click="selectBack(scope.row)"
            >返佣处理</el-button>
            <span v-else class="primaryColor">-</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="currentPageChange"
      @SizeChange="pageSizeChange"
    />
    <el-dialog
      :close-on-click-modal="modalDialog"
      :lose-on-press-escape="modalDialog"
      title="批量返佣处理"
      :visible.sync="isopenModal"
      width="800px"
    >
      <div>
        <div v-if="selectOrderItem.orderId" class="mb20">您正在处理返佣任务订单：{{ selectOrderItem.orderId }}</div>
        <div v-else class="mb20">您正在进行批量返佣处理，返佣金额统一按照预计金额发放</div>
        <div class="doumee-filter">
          <el-form ref="modal" :model="rebateForm" label-width="120px">
            <el-form-item label="处理结果:">
              <el-radio v-model="rebateForm.status" label="1">同意返佣</el-radio>
              <el-radio v-model="rebateForm.status" label="0">拒绝返佣</el-radio>
            </el-form-item>
            <el-form-item v-if="isShowMoney" label="返佣金额:" :rules="[{ required: true, message: '请输入返佣金额', trigger: 'blur' }]">
              <el-input v-model="rebateForm.money" class="w400" placeholder="请输入返佣金额" />
            </el-form-item>
            <el-form-item label="备注:">
              <el-input v-model="rebateForm.remarks" class="w400" type="textarea" placeholder="请输入备注信息" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isopenModal = false">取消</el-button>
        <el-button type="primary" @click="shareOrderSub">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ShareOrderList, ShareConsumeTypes, sPShareOrder, ShareOrderExport } from '@/api'
import Paginations from '@/components/paginations'
import { queryFormConfig } from './config'
export default {
  components: {
    Paginations
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      queryFormConfig,
      modalDialog: this.$store.state.app.dialog,
      isopenModal: false,
      isShowMoney: false,
      filters: {},
      rebateForm: {
        status: '1'
      },
      pagination: {
        page: 1,
        rows: 10
      },
      subLoading: false,
      list: [],
      totalCount: 0,
      listLoading: false,
      exportLoading: false,
      selectOrderList: [],
      selectOrderItem: {},
      orderTypeList: []

    }
  },
  created() {
    this.getShareConsumeTypes()
    this.getShareOrderList()
  },
  methods: {
    handleQuery() {
      this.pagination.page = 1
      this.getShareOrderList()
    },
    getShareOrderList() {
      const { filters, pagination } = this
      if (filters.time && filters.time.length > 0) {
        filters.beginTime = filters.time[0]
        filters.endTime = filters.time[1]
      } else {
        filters.beginTime = ''
        filters.endTime = ''
      }
      this.listLoading = true
      ShareOrderList({ param: filters, pagination }).then(res => {
        this.listLoading = false
        if (res.errorCode !== '000000') return
        this.list = res.recordList
        this.totalCount = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    shareOrderSub() {
      const param = { ...this.rebateForm }
      if (this.selectOrderItem.orderId) {
        param.ids = [this.selectOrderItem.orderId]
      } else {
        param.ids = this.selectOrderList.map(i => i.orderId)
      }

      this.$refs['modal'].validate((valid) => {
        if (valid) {
          this.subLoading = true
          sPShareOrder({ param }).then(res => {
            this.subLoading = false
            if (res.errorCode !== '000000') return
            this.$message.success('处理成功')
            this.isopenModal = false
            this.handleQuery()
          }, () => {
            this.subLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getShareConsumeTypes() {
      ShareConsumeTypes({ param: {}}).then(res => {
        this.orderTypeList = res.recordList
      })
    },
    handleSelectionChange(val) {
      this.selectOrderList = val
    },
    orderDetail(item) {
      if (this.meta.indexOf('getShareOrderDetial') === -1) {
        return
      }
      this.$router.push({ name: 'ShareOrderDetail', query: { id: item.id }})
    },
    clear() {
      this.filters = {}
      this.handleQuery()
    },
    selectBack(item) {
      if (item || this.selectOrderList.length === 1) {
        this.selectOrderItem = item || this.selectOrderList[0]
        this.isShowMoney = true
      } else {
        this.selectOrderItem = {}
        this.isShowMoney = false
      }
      if (!item && this.selectOrderList.length === 0) {
        return this.$message.warning('请先选择订单再批量处理')
      }
      this.rebateForm = {
        status: '1',
        money: this.selectOrderItem.taskMoney || ''
      }
      this.isopenModal = true
    },
    selectExport() {
      const { filters } = this
      if (filters.time && filters.time.length > 0) {
        filters.beginTime = filters.time[0]
        filters.endTime = filters.time[1]
      } else {
        filters.beginTime = ''
        filters.endTime = ''
      }
      this.exportLoading = true
      ShareOrderExport({ param: filters }).then(res => {
        this.exportLoading = false
        if (res.errorCode === '000000') {
          window.open(res.record.showUrl, '_blank')
        }
      }, () => {
        this.exportLoading = false
      })
    },
    currentPageChange(val) {
      this.pagination.page = val
      this.getShareOrderList()
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getShareOrderList()
    }
  }
}
</script>

<style>

</style>
